@keyframes ringrotate {
    0% {
        -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
    }
}
.shaky {
  display: inline-block;
  padding: 1px;
  font-size: 12px;

  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;

  -webkit-animation-name: shaky-slow;
  -ms-animation-name: shaky-slow;
  animation-name: shaky-slow;

  -webkit-animation-duration: 4s;
  -ms-animation-duration: 4s;
  animation-duration: 4s;

  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;

  -webkit-animation-play-state: paused;
  -ms-animation-play-state: paused;
  animation-play-state: paused;

}
.shaky:hover {
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running;
}

//抖动动画
@-webkit-keyframes shaky-slow {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg)
  }
  2% {
    -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg)
  }
  4% {
    -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg)
  }
  6% {
    -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg)
  }
  8% {
    -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg)
  }
  10% {
    -webkit-transform: translate(1.4px, 0px) rotate(-2deg)
  }
  12% {
    -webkit-transform: translate(-1.3px, -1px) rotate(-2deg)
  }
  14% {
    -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg)
  }
  16% {
    -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg)
  }
  18% {
    -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg)
  }
  20% {
    -webkit-transform: translate(1px, 1px) rotate(-0.5deg)
  }
  22% {
    -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg)
  }
  24% {
    -webkit-transform: translate(-1.4px, -1px) rotate(2deg)
  }
  26% {
    -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg)
  }
  28% {
    -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg)
  }
  30% {
    -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
  }
  32% {
    -webkit-transform: translate(-1px, 0px) rotate(2deg)
  }
  34% {
    -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg)
  }
  36% {
    -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg)
  }
  38% {
    -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg)
  }
  40% {
    -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg)
  }
  42% {
    -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
  }
  44% {
    -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg)
  }
  46% {
    -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
  }
  48% {
    -webkit-transform: translate(1px, 1.6px) rotate(1.5deg)
  }
  50% {
    -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg)
  }
  52% {
    -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg)
  }
  54% {
    -webkit-transform: translate(1.6px, -1px) rotate(-2deg)
  }
  56% {
    -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg)
  }
  58% {
    -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg)
  }
  60% {
    -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg)
  }
  62% {
    -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
  }
  64% {
    -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  66% {
    -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg)
  }
  68% {
    -webkit-transform: translate(0px, -1.6px) rotate(-2deg)
  }
  70% {
    -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg)
  }
  72% {
    -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
  }
  74% {
    -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg)
  }
  76% {
    -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg)
  }
  78% {
    -webkit-transform: translate(-1px, 1.4px) rotate(2deg)
  }
  80% {
    -webkit-transform: translate(1.4px, 1.6px) rotate(2deg)
  }
  82% {
    -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
  }
  84% {
    -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg)
  }
  86% {
    -webkit-transform: translate(1px, 1.4px) rotate(-2deg)
  }
  88% {
    -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
  }
  90% {
    -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  92% {
    -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)
  }
  94% {
    -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  96% {
    -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg)
  }
  98% {
    -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg)
  }
}
@keyframes shaky-slow {
  0% {
    transform: translate(0px, 0px) rotate(0deg)
  }
  2% {
    transform: translate(-1px, 1.5px) rotate(1.5deg)
  }
  4% {
    transform: translate(1.3px, 0px) rotate(-0.5deg)
  }
  6% {
    transform: translate(1.4px, 1.4px) rotate(-2deg)
  }
  8% {
    transform: translate(-1.3px, -1px) rotate(-1.5deg)
  }
  10% {
    transform: translate(1.4px, 0px) rotate(-2deg)
  }
  12% {
    transform: translate(-1.3px, -1px) rotate(-2deg)
  }
  14% {
    transform: translate(1.5px, 1.3px) rotate(1.5deg)
  }
  16% {
    transform: translate(1.5px, -1.5px) rotate(-1.5deg)
  }
  18% {
    transform: translate(1.3px, -1.3px) rotate(-2deg)
  }
  20% {
    transform: translate(1px, 1px) rotate(-0.5deg)
  }
  22% {
    transform: translate(1.3px, 1.5px) rotate(-2deg)
  }
  24% {
    transform: translate(-1.4px, -1px) rotate(2deg)
  }
  26% {
    transform: translate(1.3px, -1.3px) rotate(0.5deg)
  }
  28% {
    transform: translate(1.6px, -1.6px) rotate(-1.5deg)
  }
  30% {
    transform: translate(-1.3px, -1.3px) rotate(-1.5deg)
  }
  32% {
    transform: translate(-1px, 0px) rotate(2deg)
  }
  34% {
    transform: translate(1.3px, 1.3px) rotate(-0.5deg)
  }
  36% {
    transform: translate(1.3px, 1.6px) rotate(1.5deg)
  }
  38% {
    transform: translate(1.3px, -1.6px) rotate(1.5deg)
  }
  40% {
    transform: translate(-1.4px, -1px) rotate(-0.5deg)
  }
  42% {
    transform: translate(-1.4px, 1.3px) rotate(-0.5deg)
  }
  44% {
    transform: translate(-1.6px, 1.4px) rotate(0.5deg)
  }
  46% {
    transform: translate(-2.1px, -1.3px) rotate(-0.5deg)
  }
  48% {
    transform: translate(1px, 1.6px) rotate(1.5deg)
  }
  50% {
    transform: translate(1.6px, 1.6px) rotate(1.5deg)
  }
  52% {
    transform: translate(-1.4px, 1.6px) rotate(0.5deg)
  }
  54% {
    transform: translate(1.6px, -1px) rotate(-2deg)
  }
  56% {
    transform: translate(1.3px, -1.6px) rotate(-2deg)
  }
  58% {
    transform: translate(-1.3px, -1.6px) rotate(0.5deg)
  }
  60% {
    transform: translate(1.3px, 1.6px) rotate(-0.5deg)
  }
  62% {
    transform: translate(0px, 0px) rotate(-1.5deg)
  }
  64% {
    transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  66% {
    transform: translate(1.6px, -1.6px) rotate(0.5deg)
  }
  68% {
    transform: translate(0px, -1.6px) rotate(-2deg)
  }
  70% {
    transform: translate(-1.6px, 1px) rotate(1.5deg)
  }
  72% {
    transform: translate(-1.6px, 1.6px) rotate(2deg)
  }
  74% {
    transform: translate(1.3px, -1.6px) rotate(-0.5deg)
  }
  76% {
    transform: translate(1.4px, 1px) rotate(-0.5deg)
  }
  78% {
    transform: translate(-1px, 1.4px) rotate(2deg)
  }
  80% {
    transform: translate(1.4px, 1.6px) rotate(2deg)
  }
  82% {
    transform: translate(-1.6px, -1.6px) rotate(-0.5deg)
  }
  84% {
    transform: translate(-1.4px, 1.4px) rotate(-2deg)
  }
  86% {
    transform: translate(1px, 1.4px) rotate(-2deg)
  }
  88% {
    transform: translate(-1.4px, 1.4px) rotate(-1.5deg)
  }
  90% {
    transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  92% {
    transform: translate(-1.4px, 1.6px) rotate(2deg)
  }
  94% {
    transform: translate(-1.6px, -1.6px) rotate(-2deg)
  }
  96% {
    transform: translate(-1.4px, 1.3px) rotate(-2deg)
  }
  98% {
    transform: translate(1.3px, 1px) rotate(-0.5deg)
  }
}

//摇晃动画
@-webkit-keyframes wrench {
 0% {
  -webkit-transform:rotate(-12deg);
  transform:rotate(-12deg)
 }
 8% {
  -webkit-transform:rotate(12deg);
  transform:rotate(12deg)
 }
 10% {
  -webkit-transform:rotate(24deg);
  transform:rotate(24deg)
 }
 18%,
 20% {
  -webkit-transform:rotate(-24deg);
  transform:rotate(-24deg)
 }
 28%,
 30% {
  -webkit-transform:rotate(24deg);
  transform:rotate(24deg)
 }
 38%,
 40% {
  -webkit-transform:rotate(-24deg);
  transform:rotate(-24deg)
 }
 48%,
 50% {
  -webkit-transform:rotate(24deg);
  transform:rotate(24deg)
 }
 58%,
 60% {
  -webkit-transform:rotate(-24deg);
  transform:rotate(-24deg)
 }
 68% {
  -webkit-transform:rotate(24deg);
  transform:rotate(24deg)
 }
 100%,
 75% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
}
@keyframes wrench {
 0% {
  -webkit-transform:rotate(-12deg);
  -ms-transform:rotate(-12deg);
  transform:rotate(-12deg)
 }
 8% {
  -webkit-transform:rotate(12deg);
  -ms-transform:rotate(12deg);
  transform:rotate(12deg)
 }
 10% {
  -webkit-transform:rotate(24deg);
  -ms-transform:rotate(24deg);
  transform:rotate(24deg)
 }
 18%,
 20% {
  -webkit-transform:rotate(-24deg);
  -ms-transform:rotate(-24deg);
  transform:rotate(-24deg)
 }
 28%,
 30% {
  -webkit-transform:rotate(24deg);
  -ms-transform:rotate(24deg);
  transform:rotate(24deg)
 }
 38%,
 40% {
  -webkit-transform:rotate(-24deg);
  -ms-transform:rotate(-24deg);
  transform:rotate(-24deg)
 }
 48%,
 50% {
  -webkit-transform:rotate(24deg);
  -ms-transform:rotate(24deg);
  transform:rotate(24deg)
 }
 58%,
 60% {
  -webkit-transform:rotate(-24deg);
  -ms-transform:rotate(-24deg);
  transform:rotate(-24deg)
 }
 68% {
  -webkit-transform:rotate(24deg);
  -ms-transform:rotate(24deg);
  transform:rotate(24deg)
 }
 100%,
 75% {
  -webkit-transform:rotate(0);
  -ms-transform:rotate(0);
  transform:rotate(0)
 }
}

.bodyHidden{
  transform: translateY(200%);
}
.moonScale{
  transform: scale(1) !important ;
}
.newPicHidden{
  transform: scaleX(0) !important;
}
.lrcBg{
  font-size: 1.2em !important;
  border-bottom: solid 5px #00cec9 !important;
}
.picMoveLeft {
    animation-name: moveForPic ;
    animation-duration: 0.6s  ;
    animation-direction: normal ;
    animation-iteration-count: 1 ;
    animation-timing-function: linear ;
    animation-fill-mode: forwards ;
}
.picDisplay{
  visibility:hidden ;
}
.picMenuScale{
  transform: scaleX(1) !important ;
}
.listMove{
    transform: translateX(-200px); 
    //恰好抵消
}
.listLight{
    background-color: rgb(250, 177, 160) !important;
    transition:background-color 1s ;
    color: black !important;
}
.bg10S{
    background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad) !important;
    background-size: 400%;
    animation: bgAnimation 10s infinite ;
}
.bg8S{
    background-image: linear-gradient(125deg,#eb4d4b,#f0932b,#b1b1b1, #2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad) ;
    background-size: 400%;
    animation: bgAnimation 8s infinite ;
}
.rote10S{
    animation-name: normalRote ;
    animation-duration: 10s  ;
    animation-direction: normal ;
    animation-iteration-count: infinite ;
    animation-timing-function: linear ;
}
.scale1S{
    animation-name: normalScale ;
    animation-duration: 1s  ;
    animation-direction: normal ;
    animation-iteration-count: infinite ;
    animation-timing-function: ease-out ;
}
.opa1S{
    animation-name: normalOpa ;
    animation-duration: 1s  ;
    animation-direction: normal ;
    animation-iteration-count: infinite ;
    animation-timing-function: ease-out ;
}
.hidden2show{
  transform: translateX(0%) !important; 
}
.show2hidden{
  transform: translateX(-100%);
}
.fromLeft1S {
    animation-name: moveFromLeft ;
    animation-duration: 0.2s  ;
    animation-direction: normal ;
    animation-iteration-count: 1 ;
    animation-timing-function: linear ;
    animation-fill-mode: forwards ;
}
.fromRight1S {
    animation-name: moveFromRight ;
    animation-duration: 0.2s  ;
    animation-direction: normal ;
    animation-iteration-count: 1 ;
    animation-timing-function: linear ;
    animation-fill-mode: forwards ;
}
.typeMachine{
  animation:  typeGrow 4s steps(26) 1s normal both ;
              //typeBlink 500ms steps(22) infinite normal ;
}
.wave1{
    animation-name: waveMove_1 ;
    animation-duration: 30s  ;
    animation-direction: alternate ;
    animation-iteration-count: infinite; ;
    animation-timing-function: linear ;
   //animation-fill-mode: forwards ;
}
.wave2{
    animation-name: waveMove_2 ;
    animation-duration: 30s  ;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite; ;
    animation-timing-function: linear ;
   //animation-fill-mode: forwards ;
}
.hiddenFormY{
  transform: scaleY(0);
}

@keyframes waveMove_1{
  0%{
    transform: translateX(0px);
  }
  100%{
    transform: translateX(-66%);
  }
}
@keyframes waveMove_2{
  0%{
    transform: translateX(-250px);
  }
  100%{ 
    transform: translateX(-66% );
  }
}
@keyframes picHidden{
    0% {}
    60%{
      opacity:0;
    }
    100% {
      opacity:0;
      transform: scale(0);
    }
}
@keyframes picShow{
    0% { 
      transform: scale(0);
    }
    70% {
        transform: scale(1);
    }
    80% {
        transform: scale(0.9);
    }
    90% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes btnRote1{
  0%{}
  25%{
    transform: rotateZ(90deg);
  }
  50%{
    transform: rotateZ(180deg);
  }
  75%{
    transform: rotateZ(270deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}
@keyframes btnRote2{
  0%{}
  25%{
    transform: rotateZ(-90deg);
  }
  50%{
    transform: rotateZ(-180deg);
  }
  75%{
    transform: rotateZ(-270deg);
  }
  100%{
    transform: rotateZ(-360deg);
  }
}
@keyframes normalRote{
    0% {}

    100% {
        transform: rotateZ(360deg);
    }
}
@keyframes normalScale{
    0% {}
    100% {
        transform: scale(1.11);
    }
}
@keyframes normalOpa{
    0% {
        opacity: 0.5 ;
    }
    80% {
        opacity: 0.8 ;
    }
    100% {
        opacity: 0.9 ;
    }
}
@-webkit-keyframes moveForPic {
  0% {}
  30% {
     transform: translateX(-250px) ;
  }
  50% {
     transform: translateX(-220px) ;
  }
  70% {
     transform: translateX(-250px) ;
  }
  85% {
     transform: translateX(-230px) ;
  }
  100% {
     transform: translateX(-250px) ;
  }
}
@keyframes moveForPic1 {
  0% {}
  30% {
     transform: translateX(-250px) ;
  }
  50% {
     transform: translateX(-220px) ;
  }
  70% {
     transform: translateX(-250px) ;
  }
  85% {
     transform: translateX(-230px) ;
  }
  100% {
     transform: translateX(-250px) ;
  }
}
@keyframes moveForPic2 {
  0% {
    transform: translateX(-250px) ;
  }
  30% {
     transform: translateX(0px) ;
  }
  50% {
     transform: translateX(-30px) ;
  }
  70% {
     transform: translateX(-10px) ;
  }
  85% {
     transform: translateX(-20px) ;
  }
  100% {
     transform: translateX(0px) ;
  }
}
@keyframes moveFromLeft{
    0% {
        transform: skewX(-30deg) ;
    }
    100% {
        transform: skewX(-30deg) ;
        transform: translateX(210%) ;
    }
}
@keyframes moveFromRight{
    0% {
        transform: skewX(-30deg) ;
    }
    100% {
        transform: skewX(-30deg) ;
        transform: translateX(-110%) ;
    }
}
@keyframes bgAnimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}
@-webkit-keyframes vertical {
 0% {
  -webkit-transform:translate(0,-3px);
  transform:translate(0,-3px)
 }
 4% {
  -webkit-transform:translate(0,3px);
  transform:translate(0,3px)
 }
 8% {
  -webkit-transform:translate(0,-3px);
  transform:translate(0,-3px)
 }
 12% {
  -webkit-transform:translate(0,3px);
  transform:translate(0,3px)
 }
 16% {
  -webkit-transform:translate(0,-3px);
  transform:translate(0,-3px)
 }
 20% {
  -webkit-transform:translate(0,3px);
  transform:translate(0,3px)
 }
 100%,
 22% {
  -webkit-transform:translate(0,0);
  transform:translate(0,0)
 }
}
@keyframes vertical {
 0% {
  -webkit-transform:translate(0,-3px);
  -ms-transform:translate(0,-3px);
  transform:translate(0,-3px)
 }
 4% {
  -webkit-transform:translate(0,3px);
  -ms-transform:translate(0,3px);
  transform:translate(0,3px)
 }
 8% {
  -webkit-transform:translate(0,-3px);
  -ms-transform:translate(0,-3px);
  transform:translate(0,-3px)
 }
 12% {
  -webkit-transform:translate(0,3px);
  -ms-transform:translate(0,3px);
  transform:translate(0,3px)
 }
 16% {
  -webkit-transform:translate(0,-3px);
  -ms-transform:translate(0,-3px);
  transform:translate(0,-3px)
 }
 20% {
  -webkit-transform:translate(0,3px);
  -ms-transform:translate(0,3px);
  transform:translate(0,3px)
 }
 100%,
 22% {
  -webkit-transform:translate(0,0);
  -ms-transform:translate(0,0);
  transform:translate(0,0)
 }
}

@keyframes typeGrow{
  0%{
    width: 0 ;
  }
  100%{
    width: 100% ;
  }
}
@keyframes typeBlink{
  0%{
    border-top: solid 2px  #2d3436  ;
  }
  100%{
    border-top: solid 2px  transparent ;
  }
}
